<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    title="操作记录"
    width="900px"
    top="30px"
  >
    <div v-loading="loading">
      <table
        class="table table-bordered table-vertical-middle"
        v-for="(p, index) of tableData"
        :key="index"
      >
        <colgroup>
          <col width="20%" />
          <col width="30%" />
          <col width="20%" />
          <col width="30%" />
        </colgroup>
        <tr>
          <td>操作类型：</td>
          <td>【{{ enumStatus[p.lend_type] }}】</td>
          <td>操作时间：</td>
          <td>{{ $utils.dateFormat(p.lend_time, 'yyyy-MM-dd') }}</td>
        </tr>
        <tr>
          <td>交接人：</td>
          <td>{{ p.lend_person }}</td>
          <td>登记人：</td>
          <td>{{ p.submit_person_name }}</td>
        </tr>
        <tr>
          <td>备注说明：</td>
          <td colspan="3">{{ p.lend_des }}</td>
        </tr>
      </table>

      <div v-if="!tableData.length" class="text-center p-3 text-muted bg-light mb-2">暂无数据</div>

      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="totalCount"
          @current-change="getData"
        ></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      enumStatus: {
        2: '归还登记',
        1: '借出登记',
        3: '退还登记',
      },
      params: {
        index: 1,
        size: 3,
      },
      tableName: 'lend_register',
      tableData: [],
      loading: false,
      totalCount: 0,
    }
  },

  watch: {
    id() {
      this.params['register_id.eq'] = this.id
      this.getData()
    },
  },

  created() {
    this.params['register_id.eq'] = this.id
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
